<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/style_script::head('首页','/static/bootstrap-3.3.7/css/bootstrap.css')">
	<meta  charset="UTF-8"/>
</head>
	<link th:href="@{/static/bootstrap-3.3.7/css/bootstrap.min.css}" rel="stylesheet"/>
	<script th:src="@{/static/bootstrap-3.3.7/js/bootstrap.min.js}"  type="text/javascript" ></script>		
<body>
	<hr style="border:1px solid red;"/>
	<div class="container">
		<button class="btn">基本按钮</button>
		<button class="btn btn-default">默认</button>
		<button class="btn btn-primary">原始按钮</button>
		<button class="btn btn-success">成功时按钮</button>
		<button class="btn btn-info">Info</button>
		<button class="btn btn-warning">Warning</button>
		<button class="btn btn-danger">Danger</button>
		<button class="btn btn-link">link</button>
		<button class="btn btn-info btn-lg">大信息按钮</button>
		<button class="btn btn-info btn-sm">小信息按钮</button>
		<button class="btn btn-info btn-xs">超小信息按钮</button>
		<button class="btn btn-success btn-block">块级按钮</button>
		<button class="btn btn-success active">点击激活的按钮</button>
		<button class="btn btn-success disabled">禁用按钮</button>
		<p>按钮组</p>
		<div class="btn-group">
			<button type="button" class="btn btn-primary">Apple</button>
			<button type="button" class="btn btn-primary">HUAWEI</button>
			<input type="button" class="btn btn-primary" value="Sony"></input>
			<input type="button" class="btn btn-primary" value="MI"></input>
			
		</div>
		<div class="btn-group btn-group-lg">
			<button type="button" class="btn btn-primary">Apple</button>
			<button type="button" class="btn btn-primary">HUAWEI</button>
			<input type="button" class="btn btn-primary" value="Sony"></input>
			<input type="button" class="btn btn-primary" value="MI"></input>
		</div>
		<div class="btn-group-vertical">
			<button type="button" class="btn btn-primary">Apple</button>
			<button type="button" class="btn btn-primary">HUAWEI</button>
			<input type="button" class="btn btn-primary" value="Sony"></input>
			<input type="button" class="btn btn-primary" value="MI"></input>
		</div>
		<div class="btn-group btn-group-justified">
			<a href="#" class="btn btn-primary">Apple</a>
  			<a href="#" class="btn btn-primary">Samsung</a>
  			<a href="#" class="btn btn-primary">Sony</a>
		</div>
		<div class="btn-group btn-group-justified">
			<div class="btn-group">
				<button type="button" class="btn btn-primary">Apple</button>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-primary">Samsung</button>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-primary">Sony</button>
			</div>
		</div>
		<p>内嵌下拉菜单按钮组</p>
		<div class="btn-group">
			<button type="button" class="btn btn-primary">Apple</button>
			<button type="button" class="btn btn-primary">Samsung</button>
			<div class="btn-group">
				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
					Sony&nbsp;&nbsp;<span class="caret" role="menu"></span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Tablet</a></li>
					<li><a href="#">Smartphone</a></li>
				</ul>
			</div>
		</div>
		<p>分割按钮</p>
		<div class="btn-group">
			<button class="btn btn-primary">sony</button>
			<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" role="menu">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
	</div>
	<hr style="border:1px solid red;"/>
	<div class="container">
		<nav class="navbar navbar-default">
		<!-- static navbar -->
		<div class="navbar navbar-default">
			<div class="container-fluid">
				<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
              		<span class="icon-bar"></span>
              		<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Project Name</a>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">HOME</a></li>
					<li><a href="#">ABOUT</a></li>
					<li><a href="#">CONTACT</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" 
										aria-expanded="false">Dropdown<span class="caret"></span></a>
						 <ul class="dropdown-menu">
                  			<li><a href="#">Action</a></li>
                  			<li><a href="#">Another action</a></li>
                  			<li><a href="#">Something else here</a></li>
                  			<li role="separator" class="divider"></li>
                  			<li class="dropdown-header">Nav header</li>
                  			<li><a href="#">Separated link</a></li>
                  			<li><a href="#">One more separated link</a></li>
                		</ul>
					</li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
              		<li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              		<li><a href="../navbar-static-top/">Static top</a></li>
              		<li><a href="../navbar-fixed-top/">Fixed top</a></li>
            	</ul>
			</div>
		</div>
		<h2>表格</h2>
		<p>创建响应式表格</p>
		<div class="table-responsive">
			<table class="table table-striped table-bordered">
				<thead>
					<tr>
						<th>#</th>
						<th>NAME</th>
						<th>Street</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>Anna Awesome</td>
						<td>Broome Street</td>
					</tr>
					<tr>
						<td>2</td>
						<td>Jonh Doe</td>
						<td>Madison Street</td>
					</tr>
					<tr>
						<td>3</td>
						<td>Jonh Doe</td>
						<td>Madison Street</td>
					</tr>
				</tbody>
			</table>
		</div>
		<h2>图像</h2>
		<p>创建响应式图片（将扩展到父元素），另外:图片以椭圆形展示</p>
		<img th:src="@{/static/img/2.jpg}"  class="img-circle img-thumbnail" alt="Cinque Terre"  style="border:1px solid red" width="304" height="236"/> 
		<h2>图标</h2>
		<p>插入图标</p>
		<p>云图标：<span class="glyphicon glyphicon-cloud"></span></p>
		<p>信件图标:<span class="glyphicon glyphicon-envelope"></span></p>
		<p>搜索图标:<span class="glyphicon glyphicon-search"></span></p>
		<p>打印图标:<span class="glyphicon glyphicon-print"  onclick="print();"></span></p>
		<p>下载图标:<span class="glyphicon glyphicon-download"></span></p>
		</nav>
	</div>
	<hr style="border:1px solid red;"/>
	<div class="container">
		<div class="row">
			<div class="col-lg-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">1
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
				eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
				enim ad minim veniam, quis nostrud exercitation ullamco laboris 
				nisi ut aliquip ex ea commodo consequat. 
				</p>

				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
				accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
				quae ab illo inventore veritatis et quasi architecto beatae vitae 
				dicta sunt explicabo. 
				</p>
			</div>
			<div class="col-md-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
					accusantium doloremque laudantium.
				</p>

				<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
					consectetur, adipisci velit, sed quia non numquam eius modi 
					tempora incidunt ut labore et dolore magnam aliquam quaerat 
					voluptatem. 
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 col-lg-4" style="background-color: #dedef8; 
         		box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            		eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            		enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            		nisi ut aliquip ex ea commodo consequat. 
         		</p>
 
         		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            		accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
            		quae ab illo inventore veritatis et quasi architecto beatae vitae 
           		 dicta sunt explicabo. 
         		</p>
			</div>
			<div class="col-md-6 col-lg-8" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         		 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            		accusantium doloremque laudantium.
        		 </p>
 
        		 <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
           			 consectetur, adipisci velit, sed quia non numquam eius modi 
            		tempora incidunt ut labore et dolore magnam aliquam quaerat 
            		voluptatem. 
         		</p>
         	
         </div>
		</div>
		<div class="row">	
			<div class="col-md-8 col-md-offset-2" style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
        		<p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
            </p>
        	</div>
		</div>
	</div>
	<div class="container">
		<h1>Hello World</h1>
		<div class="row" style="">
			<div class="col-md-3" style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444">
				<h4>第一列</h4>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit.
				</p>
			</div>
		</div>
		<div class="col-md-9" style="float:right; background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
			<h4>第二列分为四个盒子</h4>
			<div class="row">
				<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					<p>
						Consectetur art party Tonx culpa semiotics. Pinterest 
        assumenda minim organic quis.
					</p>
				</div>
				<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					 <p>
                         sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
				</div>
			</div>
			<div class="row">
				    <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat.
                    </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim.
                    </p>
                </div>
			</div>
		</div>
	</div>
	<div class="container">
		<h1>HelloWorld</h1>
		<div class="row">
			<p>排序前</p>
			<div class="col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
				我在左边
			</div>
			<div class="col-lg-8" style="background-color:#dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;" >
			我在右边
			</div>
		</div>
		<div class="row">
			<p>
          		  排序后
        	</p>
			<div class="col-lg-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
				我在左边
			</div>
			<div class="col-lg-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
			右边
			</div>
		</div>
	</div>
	<hr style="border:1px solid red;"/>
	<div class="container">
		<p>Bootstrap排版</p>
		<p>内联子标题</p>
	</div>
	<div class="container">
		<code>Bootstrap表格</code>
		<table class="table">
			<caption>基本的表格布局</caption>
			<thead>
				<tr>
					<th>名称</th>
					<th>城市</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tanmay</td>
					<td>Bangalore</td>					
				</tr>
				<tr>
					<td>Sachin</td>
					<td>Mumbai</td>
				</tr>
				<tr>
					<td>Sachin</td>
					<td>Mumbai</td>
				</tr>
				<tr>
					<td>Sachin</td>
					<td>Mumbai</td>
				</tr>
			</tbody>
		</table>
	</div>
	<hr/>
	<div class="container">
		<code>Bootstrap表单</code>
		<code>垂直或基本表单</code>
		<form role="form">
			<div class="form-group">
				<label for="name">名称</label>
				<input type="text" class="form-control" id="name" name="name" placeholder="请输入名称"></input>
			</div>
			<div class="form-group">
				<label for="inputfile">文件输入</label>
				<input type="file" id="inputfile"></input>
				<p class="help-block">这里是块级帮助文本的实例</p>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox"></input>请打√
				</label>
			</div>
			<button type="submit" class="btn btn-default">提交</button>
		</form>
		<code>内联表单</code>
		<form class="form-inline" role="form">
			<div class="form-group">
				<label class="sr-only" for="name">名称</label>
				<input type="text" class="form-control" id="name" 
				placeholder="请输入名称"/>
			</div>
			<div class="form-group">
				<label class="sr-only" for="inputfile">文本输入</label>
				<input type="file" id="inputfile"/>
			</div>
			<div class="checkbox">
				<label type="checkbox">请打勾</label>
			</div>
			<button type="submit" class="btn btn-default">提交</button>
		</form>
	</div>
	<hr style="border:1px solid red"/>
	<div class="container">
		<code>Bootstrap字体图标</code>
		<span class="glyphicon glyphicon-search"></span>
		<p>
			<button type="button" class="btn btn-default">
				<span class="glyphicon glyphicon-sort-by-attributes"></span>
			</button>
			<button type="button" class="btn btn-default">
				<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
			</button>
			<button type="button" class="btn btn-default">
				<span class="glyphicon glyphicon-sort-by-order"></span>
			</button>
			<button class="btn btn-default">
				<span class="glyphicon glyphicon-sort-by-order-alt"></span>
			</button>
		</p>
		<button class="btn btn-default btn-lg">
			<span class="glyphicon glyphicon-user"></span>User
		</button>
		<button class="btn btn-default btn-sm">
			<span class="glyphicon glyphicon-user"></span>User
		</button>
		<button class="btn btn-default btn-xs">
			<span class="glyphicon glyphicon-user"></span>User
		</button>
		<p>
			<button type="button" class="btn btn-primary btn-lg" style="text-shadow:black 5px 3px 3px">
				<span class="glyphicon glyphicon-user"></span>
				User
			</button>	
		</p>
	</div>
	<div class="container">
	<code>Bootstrap下拉菜单</code>
		<div class="dropdown">
		<button type="button" class="btn dropdown-toggle" 
		id="dropdownMenu1" data-toggle="dropdown">主题&nbsp;
		<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu" aria-labelledy="dropdownMenu1">
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">Java</a>
			</li>
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
			</li>
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">数据通信</a>
			</li>
			<li role="presentation" class="divider"></li>
			<li role="presentation" >
				<a role="menuitem" tabindex="-1" href="#">分离的连接</a>
			</li>
		</ul>
		</div>
	</div>
	<div class="container">
		<h3><code>基本输入框组</code></h3>
		<div class="row">
		<div class="col-lg-8" style="padding:100px 100px 10px;">
			<form class="bs-example bs-example-form" role="form">
				<div class="input-group input-group-lg" >
					<span class="input-group-addon">@</span>
					<input type="text" class="form-control" placeholder="UserName"/>
				</div>
				<div class="input-group input-group-lg">
					<input type="text" class="form-control"/>
					<span class="input-group-addon">.00</span>
				</div>
				<div class="input-group input-group-lg">
					<span class="input-group-addon">$</span>
					<input type="text" class="form-control"/>
					<span class="input-group-addon">.00</span>
				</div>
			</form>
		</div>
		</div>
	</div>
	<div class="container">
		<div style="padding:100px 100px 10px">
		<form class="bs-example bs-example-form" role="form">
			<div class="row">
				<div class="col-lg-6">
					<div class="input-group">
						<span class="input-group-addon">
							<input type="checkbox"/>
						</span>
						<input type="text" class="form-control"/>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="input-group">
						<span class="input-group-addon">
							<input type="radio"/>
						</span>
						<input type="text" class="form-control"/>
					</div>
				</div>
			</div>
			</form>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	function print(){
		alert("打印");
	}
	$(function(){
		
	})
</script>

